<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>新闻发布系统</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family:"Microsoft YaHei", "微软雅黑", "consolas";
            background: url(新闻背景.jpeg) ;
            background-size: 100%;
        }
        a {
            text-decoration: none;
            color: #000;
        }

        .clearfix {
            *zoom: 1;
        }
        .clearfix:before, .clearfix:after {
            display: table;
            line-height: 0;
            content: "";
        }
        .clearfix:after {
            clear: both;
        }


        .container {
            width: 1000px;
            margin: 0 auto;
        }
        .navbar .navbar-content a {
            color: #FFF;
            line-height: 54px;
            display: inline-block;
            width: 100px;
            text-align: center;
        }
        .navbar .navbar-content a:hover {
            color: #CCC;
        }

        .index-bg {
            width: 100%;
            height: 500px;

            position: absolute;
            top: -50px;
            z-index: -10;
        }

        .news-list {
            margin: 50px 0;
            background-color: #FFF;
            border-radius: 5px;
            border: 1px solid #DDD;
            padding: 30px 20px;

            min-height: 300px;
        }
        .news-list:hover {
            box-shadow: 0 0 5px 3px #CCC;
        }

        .about .about-des {
            border-left: 5px solid #CCC;
            margin-top: 15px;
        }

        .about .about-des p {
            padding-left: 10px;
            line-height: 28px;
            text-indent: 2em;
        }

        .news-list-left {
            float: left;
            width: 729px;
            margin-bottom: 50px;
        }

        .news-list-right {
            float: right;
            width: 229px;
        }

        .news-list-item {
            padding: 20px 30px;
        }

        .author-time {
            font-size: 14px;
        }
        .news-des {
            padding-bottom: 20px;
            border-bottom: 2px solid #CCC;
        }
        .news-title {
            font-size: 23px;
        }
        .news-title i {
            display: inline-block;
            width: 47px;
            height: 43px;
            margin-right: 10px;
            background: url(新闻图标.jpg) left center no-repeat;
            vertical-align: middle;
        }
        .news-title a {
            color: green;
        }
        .news-title a:hover {
            text-decoration: underline;
        }
        .news-content-des {
            line-height: 28px;
        }

        .copyright {
            clear: both;
            text-align: center;
            color: gray;

            border-top: 2px solid #CCC;
            margin-top: 50px;
            padding: 20px 0;
        }

    </style>


    <link rel="stylesheet" href="img/css/index.css">
</head>
<body>
<nav class="navbar">
    <div class="container navbar-content">
        <a href="#"></a>
        <a href="#"></a>
    </div><!-- /.container-fluid -->
</nav>


<div class="container">
    <h1 style="color: orange">新闻发布系统</h1>
    <h4></h4>

    <div class="news-list">
        <div class="news-list-left">
            <div class="news-list-item">
                <div class="author-time">
                    <span>慕女神</span> 发表于 <span>2014-07-20 18:07:10</span>
                </div>
                <div class="news-des">
                    <h3 class="news-title"><i></i><a href="#">【慕课访谈】美女程序员的蜕变史</a></h3>
                    <div class="news-content-des">
                        对于技术，她始终热爱并坚持着，尽管有过苦恼和纠结，但从未轻言放弃。所以今天她可以淡然的说出：人的一生都不会太顺利，都要经历点什么。
                        谈到经历过的挫折，她也会眼睛潮湿，也许你会惊讶于这种感性的真情流露，特别是将这种情绪与程序员联系在一起的时候。而我始终认为，这种真实值得尊敬。
                        如果你跟女程序员提到男程序员，可能她们的反应通常是“我们并不比他们差”！而Vivian则对“对手”赞赏有加——“我喜欢和他们交流，他们很有思想，能让我学到很多东西。”
                        面对工作得心应手的她，背后有多少努力和付出？她是如何谈论哪些沉浸在代码世界里的“男同行们”？现在就带你走进一个美女程序员的世界。
                    </div>
                </div>
            </div>

            <div class="news-list-item">
                <div class="author-time">
                    <span>慕女神</span> 发表于 <span>2014-07-20 18:07:10</span>
                </div>
                <div class="news-des">
                    <h3 class="news-title"><i></i><a href="#">【慕课访谈】美女程序员的蜕变史</a></h3>
                    <div class="news-content-des">
                        对于技术，她始终热爱并坚持着，尽管有过苦恼和纠结，但从未轻言放弃。所以今天她可以淡然的说出：人的一生都不会太顺利，都要经历点什么。
                        谈到经历过的挫折，她也会眼睛潮湿，也许你会惊讶于这种感性的真情流露，特别是将这种情绪与程序员联系在一起的时候。而我始终认为，这种真实值得尊敬。
                        如果你跟女程序员提到男程序员，可能她们的反应通常是“我们并不比他们差”！而Vivian则对“对手”赞赏有加——“我喜欢和他们交流，他们很有思想，能让我学到很多东西。”
                        面对工作得心应手的她，背后有多少努力和付出？她是如何谈论哪些沉浸在代码世界里的“男同行们”？现在就带你走进一个美女程序员的世界。
                    </div>
                </div>
            </div>

            <div class="news-list-item">
                <div class="author-time">
                    <span>慕女神</span> 发表于 <span>2014-07-20 18:07:10</span>
                </div>
                <div class="news-des">
                    <h3 class="news-title"><i></i><a href="#">【慕课访谈】美女程序员的蜕变史</a></h3>
                    <div class="news-content-des">
                        对于技术，她始终热爱并坚持着，尽管有过苦恼和纠结，但从未轻言放弃。所以今天她可以淡然的说出：人的一生都不会太顺利，都要经历点什么。
                        谈到经历过的挫折，她也会眼睛潮湿，也许你会惊讶于这种感性的真情流露，特别是将这种情绪与程序员联系在一起的时候。而我始终认为，这种真实值得尊敬。
                        如果你跟女程序员提到男程序员，可能她们的反应通常是“我们并不比他们差”！而Vivian则对“对手”赞赏有加——“我喜欢和他们交流，他们很有思想，能让我学到很多东西。”
                        面对工作得心应手的她，背后有多少努力和付出？她是如何谈论哪些沉浸在代码世界里的“男同行们”？现在就带你走进一个美女程序员的世界。
                    </div>
                </div>
            </div>

            <div class="news-list-item">
                <div class="author-time">
                    <span>慕女神</span> 发表于 <span>2014-07-20 18:07:10</span>
                </div>
                <div class="news-des">
                    <h3 class="news-title"><i></i><a href="#">【慕课访谈】美女程序员的蜕变史</a></h3>
                    <div class="news-content-des">
                        对于技术，她始终热爱并坚持着，尽管有过苦恼和纠结，但从未轻言放弃。所以今天她可以淡然的说出：人的一生都不会太顺利，都要经历点什么。
                        谈到经历过的挫折，她也会眼睛潮湿，也许你会惊讶于这种感性的真情流露，特别是将这种情绪与程序员联系在一起的时候。而我始终认为，这种真实值得尊敬。
                        如果你跟女程序员提到男程序员，可能她们的反应通常是“我们并不比他们差”！而Vivian则对“对手”赞赏有加——“我喜欢和他们交流，他们很有思想，能让我学到很多东西。”
                        面对工作得心应手的她，背后有多少努力和付出？她是如何谈论哪些沉浸在代码世界里的“男同行们”？现在就带你走进一个美女程序员的世界。
                    </div>
                </div>
            </div>
        </div>

        <div class="news-list-right">
            <div class="about">
                <h4>关于我们</h4>
                <div class="about-des">
                    <p>本系统使用了pengcheng的微型框架。该微型框架基于MVC框架模式研发，融合了工厂设计模式、注册模式等设计概念，帮助学员快速掌握MVC理论，提升面向对象技能，培养程序设计思想打下坚实基础。</p>
                </div>
            </div>
        </div>

        <footer class="copyright">
            版本所有权为:<br>
            沈阳月初不加班责任有限公司<br>
            所有®
        </footer>
    </div>
</div>
</body>
</html>
